<template>
  <!-- 基金选购 -->
  <el-row>
    <el-col :span="24" style="margin-top: 20px">
      <el-card
        class="card"
        style="margin-top: 20px; border-radius: 10px"
        body-style="padding:0px 20px"
      >
        <div
          slot="header"
          class="clearfix"
          style="text-align: left; font-size: 25px; font-weight: bold"
        >
          <span>方案配置</span>
        </div>
        <el-row
          style="
            padding: 20px 0px;
            display: flex;

            align-items: center;
            justify-content: center;
          "
        >
          <el-col span="4">
            <el-card
              style="background-color: #39c5bb11"
              body-style="padding:10px"
            >
              <div
                style="color: #ffb571; font-size: 20px; padding-bottom: 10px"
              >
                {{ schemename() }}
              </div>
              <div style="text-align: left">{{ schemedescription() }}</div>
            </el-card>

            <div></div>
          </el-col>

          <el-col
            span="3"
            style="
              display: flex;
              flex-flow: column nowrap;
              align-items: center;
              justify-content: center;
            "
          >
            <span style="color: #169bd5; font-size: 32px; font-weight: bold"
              >{{ steady }}%</span
            >
            <span style="color: #333333; font-size: 28px; padding: 10px 0px"
              >稳健收益</span
            >
            <span style="color: #3333336b; font-size: 20px">固收类基金</span>
          </el-col>

          <el-col span="4">
            <el-progress
              type="circle"
              :width="170"
              :stroke-width="26"
              :percentage="radical"
              :format="format"
              stroke-linecap="butt"
              color="#ffb571"
            ></el-progress>
          </el-col>

          <el-col
            span="3"
            style="
              display: flex;
              flex-flow: column nowrap;
              align-items: center;
              justify-content: center;
            "
          >
            <span style="color: #ffb571; font-size: 32px; font-weight: bold"
              >{{ radical }}%</span
            >
            <span style="color: #333333; font-size: 28px; padding: 10px 0px"
              >博取资产</span
            >
            <span style="color: #3333336b; font-size: 20px">股票类基金</span>
          </el-col>

          <el-col span="7">
            <el-row :gutter="10" style="display: flex; align-items: center">
              <el-col span="1" style="align-item: center">
                <div
                  style="width: 13px; height: 13px; background-color: #169bd570"
                ></div>
              </el-col>
              <el-col span="11">
                <div style="text-align: left; font-size: 15px">
                  债券型基金{{ bondTypeRate }}%
                </div>
              </el-col>
            </el-row>
            <el-row
              style="text-align: left; padding-left: 16px; color: #a0a0a0"
            >
              固收类基金作用在于对冲股票带来的风险，主要配置国债，地方政府债等利率债。
            </el-row>
            <el-row :gutter="10" style="display: flex; align-items: center">
              <el-col span="1" style="align-item: center">
                <div
                  style="width: 13px; height: 13px; background-color: #169bd570"
                ></div>
              </el-col>
              <el-col span="11">
                <div style="text-align: left; font-size: 15px">
                  股票型基金{{ stockTypeRate }}%
                </div>
              </el-col>
              <el-col span="1">
                <div
                  style="width: 13px; height: 13px; background-color: #ffb57170"
                ></div>
              </el-col>
              <el-col span="11">
                <div style="text-align: left; font-size: 15px">
                  混合型基金{{ hybridTypeRate }}%
                </div>
              </el-col>
            </el-row>
            <el-row
              style="text-align: left; padding-left: 16px; color: #a0a0a0"
            >
              股票类基金主要用于获取市场涨跌收益而主动基金除获取市场涨跌外,还包括依靠基金经理投资能力带来的超额收益。
            </el-row>
          </el-col>
          <el-col span="3">
            <el-button
              style="
                border-radius: 10px;
                color: #ffffff;
                background-color: #39c5bb70;
                border-width: 3px;
                border-color: #39c5bb;
                padding: 15px 10px;
                width: 120px;
              "
            >
              <span style="font-size: 20px; font-weight: bold" @click="nextpage"
                >方案变更</span
              >
            </el-button>
          </el-col>
        </el-row>
      </el-card>

      <el-card
        class="card"
        style="margin-top: 20px; border-radius: 10px"
        body-style="padding:20px"
      >
        <div
          slot="header"
          class="clearfix"
          style="
            text-align: left;

            font-size: 25px;
            font-weight: bold;
          "
        >
          <span>持仓详情</span>
        </div>
        <el-row :gutter="20" style="display: flex; align-items: center">
          <el-col span="0.5" style="align-item: center">
            <div
              style="width: 20px; height: 20px; background-color: #169bd570"
            ></div>
          </el-col>
          <el-col span="3">
            <div style="text-align: left; font-size: 18px">固收类基金</div>
          </el-col>
          <el-col span="0.5">
            <div
              style="width: 20px; height: 20px; background-color: #ffb57170"
            ></div>
          </el-col>
          <el-col span="3">
            <div style="text-align: left; font-size: 18px">股票类基金</div>
          </el-col>
        </el-row>

        <el-table
          height="300px"
          max-height="800px"
          :data="tabledata"
          cell-style="text-align:center;font-size:20px"
          header-cell-style="font-size:23px;text-align:center;background: #F5F7FA;"
          :row-class-name="tableRowClassName"
          style="
            margin-top: 20px;
            border-radius: 10px;
            border: 3px;
            border-color: #85c2ff;
          "
        >
                  <el-table-column type="expand" label="详情">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="基金名称:">
                  <span>{{ props.row.fund_name }}</span>
                </el-form-item>
                <el-form-item label="基金类型:">
                  <span>{{ props.row.fund_show_type }}</span>
                </el-form-item>
                <el-form-item label="基金占比:">
                  <span>{{ props.row.fund_proportion }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            v-for="(val, key, index) in tablelable"
            :key="key"
            :prop="key"
            :label="val"
            :sortable="index != 0 ? true : false"
            :formatter='formatterproportion'
          ></el-table-column>
        </el-table>
      </el-card>

      <el-row
        :gutter="20"
        style="
          display: flex;
          justify-content: space-between;
          flex-flow: row nowrap;
        "
      >
        <el-card
          class="card"
          style="
            margin-top: 20px;
            border-radius: 10px;
            width: 50%;
            margin: 20px 10px;
          "
          body-style="padding:0px 20px;display: flex;
              align-items: center;"
        >
          <el-col
            span="12"
            style="
              padding-top: 10px;
              padding-bottom: 10px;
              padding-right: 10px;
              padding-left: 0px;
            "
          >
            <div
              style="
                text-align: left;
                font-weight: bold;
                font-size: 20px;
                padding: 10px 0px;
              "
            >
              AHP综合基金选择模型
            </div>
            <div style="text-align: left">
              AHP模型主要使用AHP综合层次分析法与基金领域常用的“四四三三”筛选法则相结合得到符合用户需求的基金模型，该模型久经考验，已帮助本系统的广大用户取得超额收益。
            </div>
          </el-col>
          <el-col
            span="1"
            style="
              display: flex;
              align-items: flex-end;
              justify-content: flex-start;
              padding: 0px;
            "
          >
            <el-row>
              <div
                style="
                  height: 50px;
                  width: 85px;
                  background-color: #77ceff70;
                  border-radius: 10px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  flex-shrink: 0;
                  color: #3ebaff;
                  font-weight: bold;
                  font-size: 5px;
                  text-align: left;
                  margin-top: 100px;
                "
              >
                对投资组合构建具有指导意义
              </div>
            </el-row>
          </el-col>
          <el-col
            span="8"
            style="display: flex; align-items: center; justify-content: center"
          >
            <div
              style="
                height: 150px;
                width: 150px;
                background-color: #e3f5ff;
                border-radius: 1000px;
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <div
                style="
                  height: 130px;
                  width: 130px;
                  background-color: #cbecff;
                  border-radius: 1000px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <div
                  style="
                    height: 120px;
                    width: 120px;
                    background-color: #a9e0ff;
                    border-radius: 1000px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  <div
                    style="
                      height: 110px;
                      width: 110px;
                      background-color: #77ceff;
                      border-radius: 1000px;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    "
                  >
                    <div
                      style="
                        height: 100px;
                        width: 100px;
                        background-color: #ffffff;
                        border-radius: 1000px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: #3ebaff;
                        font-weight: bold;
                      "
                    >
                      (智能投模型)
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col
            span="1"
            style="
              display: flex;
              align-items: flex-start;
              justify-content: flex-end;
              padding: 0px;
            "
          >
            <el-row>
              <div
                style="
                  height: 50px;
                  width: 85px;
                  background-color: #77ceff70;
                  border-radius: 10px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  flex-shrink: 0;
                  color: #3ebaff;
                  font-weight: bold;
                  font-size: 5px;
                  text-align: left;
                  margin-bottom: 100px;
                "
              >
                大量模拟测算，精准计算可能的风险与利率
              </div>
            </el-row>
          </el-col>
          <el-col
            span="2"
            style="
              display: flex;
              align-items: flex-start;
              justify-content: flex-end;
              padding: 0px;
            "
          >
            <el-button
              style="
                border-radius: 10px;
                color: #00a3ff;
                border-width: 3px;
                border-color: #00a3ff;
                padding: 15px 10px;
                width: 150px;
                height: 35px;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                padding: 0px 10px;
                margin-top: 100px;
              "
            >
              <span style="font-size: 10px; font-weight: bold">了解模型</span>
              <i
                class="el-icon-arrow-right"
                style="font-size: 5px; font-weight: bold"
              ></i>
            </el-button>
          </el-col>
        </el-card>

        <el-card
          class="card"
          style="
            margin-top: 20px;
            border-radius: 10px;
            width: 50%;
            margin: 20px 10px;
          "
          body-style="padding:0px 20px"
        >
          <div
            style="
              text-align: left;
              font-weight: bold;
              font-size: 20px;
              padding: 20px 0px;
            "
          >
            AHP综合基金选择模型
          </div>
          <el-row
            :gutter="20"
            style="display: flex; justify-content: space-between"
          >
            <el-col
              span="8"
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 5px;
              "
            >
              <div
                style="
                  height: 75px;
                  width: 75px;
                  background-color: #77ceff40;
                  border-radius: 20000px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  flex-shrink: 0;
                "
              >
                <i
                  class="el-icon-aim"
                  style="
                    font-size: 5px;
                    color: #006aff;
                    font-size: 50px;
                    font-weight: bold;
                    flex-shrink: 0;
                  "
                ></i>
              </div>
              <div>
                <div style="font-weight: bold; text-align: left">
                  <span>坚持设定的</span>
                  <span style="color: #006aff">投资目标</span>
                </div>
                <div style="text-align: left">
                  <span
                    >在“智能投"迈出长期投资第一步，坚持已设定的目标，不轻易放弃</span
                  >
                </div>
              </div>
            </el-col>
            <el-col
              span="8"
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 5px;
              "
            >
              <div
                style="
                  height: 75px;
                  width: 75px;
                  background-color: #77ceff40;
                  border-radius: 20000px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  flex-shrink: 0;
                "
              >
                <i
                  class="el-icon-s-order"
                  style="
                    font-size: 5px;
                    color: #006aff;
                    font-size: 50px;
                    font-weight: bold;
                    flex-shrink: 0;
                  "
                ></i>
              </div>
              <div>
                <div style="font-weight: bold; text-align: left">
                  <span>保持良好的</span>
                  <span style="color: #006aff">投资纪律</span>
                </div>
                <div style="text-align: left">
                  <span
                    >在持有过程中不追涨杀跌，不被巿场热点左右，减少交易</span
                  >
                </div>
              </div>
            </el-col>
            <el-col
              span="8"
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 5px;
              "
            >
              <div
                style="
                  height: 75px;
                  width: 75px;
                  background-color: #77ceff40;
                  border-radius: 20000px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  flex-shrink: 0;
                "
              >
                <i
                  class="el-icon-view"
                  style="
                    font-size: 5px;
                    color: #006aff;
                    font-size: 50px;
                    font-weight: bold;
                    flex-shrink: 0;
                  "
                ></i>
              </div>
              <div>
                <div style="font-weight: bold; text-align: left">
                  <span>秉持长远的</span>
                  <span style="color: #006aff">投资眼光</span>
                </div>
                <div style="text-align: left">
                  <span
                    >秉持长远的投资眼光不纠结买卖的择时，尽早行动,享受时间的红利</span
                  >
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { getAllFundPlansAPI } from "@/api/getAllFundPlansAPI";

export default {
  methods: {
    tableRowClassName({ row }) {
      if (row.fund_type == "stock_fund" || row.fund_type == "hybrid_fund")
        return "stock-funds";
      if (row.fund_type == "bond_fund")
        return "fixed-income-funds";
      else return "zero-row";
    },
    // 饼图中间部分文字
    format(percentage) {
      if (percentage < 30) {
        return "低风险";
      } else if (percentage < 50) {
        return "中低风险";
      } else if (percentage < 80) {
        return "中风险";
      } else if (percentage < 90) {
        return "中高风险";
      } else {
        return "高风险";
      }
    },
    // 方案类型
    schemename() {
      if (this.radical < 30) {
        return "低风险型方案";
      } else if (this.radical < 50) {
        return "中低风险型方案";
      } else if (this.radical < 80) {
        return "中风险型方案";
      } else if (this.radical < 90) {
        return "中高风险型方案";
      } else {
        return "高利率高风险型方案";
      }
    },
    // 方案描述
    schemedescription() {
      if (this.radical < 30) {
        return "该方案股票类基金占少量份额，固收类基金占大量份额，适合十分注重稳健收益，更愿意保守投资的投资者。";
      } else if (this.radical < 50) {
        return "该方案股票类基金占较少份额，固收类基金占较多份额，适合偏好稳健收益，更愿意保守投资的投资者。";
      } else if (this.radical < 80) {
        return "该方案股票类基金占较多份额，固收类基金占较少份额，适合博取收益与稳健收益并重，均衡发展的投资者。";
      } else if (this.radical < 90) {
        return "该方案股票类基金占大量份额，固收类基金占少量份额，适合偏好博取收益，更愿意尝试全面进攻的投资者。";
      } else {
        return "该方案股票类基金占绝对份额，仅少量固收类基金作为缓冲，适合十分注重博取收益，更愿意尝试全面进攻的投资者。";
      }
    },
    // 跳转到用户测评页面
    nextpage() {
      this.$router.push({
        path: "usermeasurement",
        query: {
          user_id: this.$route.query.user_id,
        },
      });
    },
    // 获取基金方案列表
    async getfundplans() {
      const { data: res } = await getAllFundPlansAPI(this.$route.query.user_id);
      if (res.flag) {
        this.$message.success("获取基金方案成功！");
        var showData = res.data
        // 获取数据并覆盖
        for(let i = 0;i < showData.length;i++){
          if(showData[i].fund_type === "hybrid_fund"){
            showData[i].fund_show_type = "混合型基金" 
          }else if(showData[i].fund_type === "stock_fund"){
            showData[i].fund_show_type = "股票型基金"
          }else if(showData[i].fund_type === "bond_fund"){
            showData[i].fund_show_type = "债券型基金"
          }else{
            showData[i].fund_show_type = "未知类型基金"
          }
        }
        this.tabledata = showData;
      }
    },
    // 格式化基金占比
    formatterproportion(row, column){
        if(column.property=='fund_proportion'){
          var property=parseFloat(row.fund_proportion)*100
          return property.toFixed(2)+'%'
        }else{
          return row[column.property]
        }
        
    },
  },
  data() {
    return {
      // 表格数据，fundplan对象
      tabledata: [],
      // 表头
      tablelable: {
        fund_name: "基金名称",
        fund_show_type: "基金类型",
        fund_proportion: "基金占比",
      },
    };
  },
  computed: {
    // 风险资产所占比例
    radical() {
      var percentage = 0;
      for (var i = 0; i < this.tabledata.length; i++) {
        if (
          this.tabledata[i].fund_type == "stock_fund" ||
          this.tabledata[i].fund_type == "hybrid_fund"
        )
          percentage += parseFloat(this.tabledata[i].fund_proportion);
      }
      return (percentage * 100).toFixed(2);
    },
    // 稳定资产所占比例
    steady() {
      return (100.0 - this.radical).toFixed(2);
    },
    // 债券型基金比例
   bondTypeRate() {
      var percentage = 0.0;
      for (var i = 0; i < this.tabledata.length; i++) {
        if (this.tabledata[i].fund_type == "bond_fund")
          percentage += parseFloat(this.tabledata[i].fund_proportion);
      }
      return (percentage * 100).toFixed(2);
    },
    // 股票型基金比例
    stockTypeRate() {
      var percentage = 0;
      for (var i = 0; i < this.tabledata.length; i++) {
        if (this.tabledata[i].fund_type == "stock_fund")
          percentage += parseFloat(this.tabledata[i].fund_proportion);
      }
      return (percentage * 100).toFixed(2);
    },
    // 混合型基金比例
    hybridTypeRate() {
      var percentage = 0;
      for (var i = 0; i < this.tabledata.length; i++) {
        if (this.tabledata[i].fund_type == "hybrid_fund")
          percentage += parseFloat(this.tabledata[i].fund_proportion);
      }
      return (percentage * 100).toFixed(2);
    },
  },

  created() {
    this.getfundplans();
  },
};
</script>

<style scoped>
.el-table >>> .stock-funds {
  background: #ffb57150;
}

.el-table >>> .fixed-income-funds {
  background: #169bd550;
}
.el-table >>> .zero-row {
  background: #fff7d0;
}

.el-progress >>> .el-progress-circle__track {
  stroke: #169bd5;
}

.el-progress >>> .el-progress__text {
  display: inline-flex;
  justify-content: center;
  width: 50%;
  left: 50%;
  top: 50%;
  padding: 5px;
  border-radius: 30px;
  transform: translate(-50%, -50%);
  background: -webkit-linear-gradient(bottom, #ff9900, #ff0000) no-repeat;
  color: #ffffff;
  font-weight: bold;
}
</style>
